
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 500px;
            height: 300px;
            border: 1px solid #ccc;
            position: relative;
            left: 0;
            top: 0;
            display: none;
            background: #fff;
        }
        #box h1{
            height: 50px;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
            border-bottom: 1px solid #ccc;
        }
        #box img{
            width: 30px;
            height: 30px;
            position: absolute;
            right: 10px;
            top: 10px;
        }
        #box .bottom .text,#box .bottom .pass{
            width: 300px;
            height: 30px;
            display: block;
            float: left;
            margin: 30px 0 0 0;
        }
        #box .bottom span{
            height: 30px;
            line-height: 30px;
            display: block;
            float: left;
            margin: 30px 10px 0 80px;
        }
        #box .bottom .btn{
            float: left;
            width: 150px;
            height: 30px;
            background: green;
            border: none;
            text-align: center;
            line-height: 30px;
            font-size:16px;
            color: #fff;
            margin: 30px 0 0 175px;
        }
        #box .bottom{
            overflow: hidden;
        }
        p{
            float: left;
            margin: 30px 0 0 350px;
            color: #333;
            font-size: 14px;
        }
        p a{
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }
        .close{
            width: 100px;
            height: 20px;
            display: block;
            cursor: pointer;
            text-align: center;
            line-height: 20px;
            background: #ccc;
            color: #333;
            font-size: 14px;
        }
        .active{
            background: rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>
<span class="close">登录</span>
<div id="box">
    <h1>网站登录</h1>
    <img src="img/关闭.png"/>
    <div class="bottom">
        <span>账号:</span><input type="text" name="" class="text" value="" /><br />
        <span>密码:</span><input type="password" name="" class="pass" value="" /><br />
        <input type="button" name="" class="btn" value="登录" /><br />
        <p>
            <a href="#">注册新用户</a>|
            <a href="#">忘记密码</a>
        </p>
    </div>
</div>
</body>
</html>
<script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(function(){
        $(".close").eq(0).click(function(){
            $("#box").show();
            $("body").addClass("active");
        })
        $("img").click(function(){
            $("#box").hide();
            $("body").removeClass("active");
        })
        $("#box").bind("mousedown",function (e) {
            var disX = e.clientX - $(this).offset().left;
            var disY = e.clientY - $(this).offset().top;
            $(document).bind("mousemove",function (e) {
                var l = e.clientX - disX;
                var t = e.clientY - disY;
                if(l < 0){
                    l = 0;
                }
                if(l > $(window).width() - $("#box").outerWidth()){
                    l = $(window).width() - $("#box").outerWidth();
                }
                if(t > $(window).height() - $("#box").outerHeight()){
                    t = $(window).height() - $("#box").outerHeight()
                }
                if(t < 0){
                    t = 0;
                }
                $("#box").css({
                    left : l,
                    top : t
                })
            })
            $(document).bind("mouseup",function () {
                $(document).unbind("mousemove");
                $(document).unbind("mouseup");
            })
        })
    })
</script>